<!--
  通用参数填写

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/04/06 10:14
-->
<template>
  <a-form ref="formRef" :model="vdata.currentConfig" layout="vertical" :rules="vdata.formRules">
    <a-row :gutter="16">
      <a-col v-for="(item, key) in vdata.ifDefineArray" :key="key" :span="item.type === 'text' ? 12 : 24">
        <a-form-item :label="item.desc" :name="item.name">
          <!-- text or textarea -->
          <template v-if="item.type === 'text'">
            <a-input v-model:value="vdata.currentConfig[item.name]" :placeholder="item.star === '1' ? (item.placeholder || `请输入${item.desc}`) : `请输入${item.desc}` " @change="changeFun(item.name)" />
          </template>

          <template v-if="item.type === 'textarea'">
            <a-textarea v-model:value="vdata.currentConfig[item.name]" :placeholder="item.star === '1' ? (item.placeholder || `请输入${item.desc}`) : `请输入${item.desc}` " @change="changeFun(item.name)" />
          </template>

          <!--  radio -->
          <template v-else-if="item.type === 'radio'">
            <a-radio-group v-model:value="vdata.currentConfig[item.name]">
              <a-radio v-for="(radioItem) in item.radioItems" :key="radioItem.value" :value="radioItem.value">
                {{ radioItem.title }}
              </a-radio>
            </a-radio-group>
          </template>

          <!--  file -->
          <template v-else-if="item.type === 'file'">
            <JeepayUpload v-model:src="vdata.currentConfig[item.name]" bizType="cert" fileType="file" />
          </template>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script setup lang="ts">
import { ref, reactive, defineExpose } from 'vue'

// 当前的form
const formRef = ref()

const vdata = reactive({

  ifDefineArray: [] as any, // 接口的配置定义项数组
  currentConfig: {}, // 当前配置项
  formRules: [] as any //表单规则
})

// 对外提供的页面的渲染函数 （ ifDefineArray = 接口的配置定义项数组，  currentConfig = 当前配置项 ）
// 20230918 新增： isProcessStarField = true ( 是否处理 脱敏数据， 默认为 true  )
function pageRender(ifDefineArray, currentConfig, mchType, isProcessStarField = true){

    // 赋值
    vdata.ifDefineArray = ifDefineArray
    vdata.currentConfig = currentConfig

    // 重置form验证
    if (formRef.value !== undefined && formRef.value !== null) {
      formRef.value.resetFields()
    }

    // 清空验证规则
    vdata.formRules = {}

    // 遍历原始定义的类型, 用作处理radio类型
    vdata.ifDefineArray.forEach(item => {

      // 规则
      if (item.verify === 'required' && item.star !== '1') {
        vdata.formRules[item.name] = [{ required: true, message: '请输入' + item.desc, trigger: 'blur' }]
      }

      // 加密数据
      if (isProcessStarField && item.star == '1') {

        item.placeholder = vdata.currentConfig[item.name]

        // 删除加密数据的值
        vdata.currentConfig[item.name] = null
      }


      if (item.type === 'radio') {
        if(typeof (vdata.currentConfig[item.name]) !== 'undefined'){
          vdata.currentConfig[item.name] = vdata.currentConfig[item.name] + '' //转换为String类型
        }

        const radioItems:any = [] // 存放单选框value title
        const valueItems = item.values.split(',')
        const titleItems = item.titles.split(',')
        for (const i in valueItems) {
          radioItems.push({ title: titleItems[i], value: valueItems[i] })
        }

        item.radioItems = radioItems
      }
    })

}


// 对外提供的获取配置参数函数 （返回JSON类型）
function getConfigParams(){

  return formRef.value.validate().then( () => {
    return convertEncryData()
  })

}

// 转换加密数据
function convertEncryData(){

  // 对象克隆
  let result = Object.assign({}, vdata.currentConfig)

  // 遍历原始定义的类型, 用作处理radio类型
  vdata.ifDefineArray.forEach(item => {
    // 加密数据 && 空串
    if (item.star == '1' && !result[item.name] ) {
      delete result[item.name]
    }
  })

  return result
}

// 消除参数空格
function changeFun(value) {
  if(vdata.currentConfig[value]) {
    vdata.currentConfig[value] = vdata.currentConfig[value].trim()
  }
}

defineExpose({ getConfigParams, pageRender })

</script>
